import React, { useEffect, useState } from 'react'
import { NavBar, Card,  Switch } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import './Soundscene.css'
export default function Soundscene() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    return (
        <div className='soundscene'>
            <div className='soundscene-top'>
                <NavBar
                    backIcon={null} back={<img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%AF%8F%E6%97%A5%E6%8F%90%E9%86%92/u1273.png' />} onBack={back}>
                    <b className='shez-top-title' style={{ fontSize: '1rem' }}>声音场景</b>
                </NavBar>
            </div>
            <div className='soundscene-content'>
                <div className='soundscene-item'>
                    <div>
                        <p>自动播放</p>
                        <p className='soundscene-item-p'>打开潮汐时自动播放声音</p>
                    </div>
                    <Switch/>
                </div>
                <div className='soundscene-item'>
                    <div>
                        <p>音乐融合</p>
                        <p className='soundscene-item-p'>与其他音乐应用同时播放</p>
                    </div>
                    <Switch/>
                </div>
                <div className='soundscene-item'>
                    <div>
                        <p>后台播放</p>
                        <p className='soundscene-item-p'>后台运行时将继续播放</p>
                    </div>
                    <Switch defaultChecked/>
                </div>
            </div>
        </div>
    )
}
